 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{$Think.config.site.title} - 管家管理</title>
    <meta name="keywords" content="{$Think.config.site.keywords}">
    <link href="{$Think.config.site.resource_url}css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/animate.min.css" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/style.min.css?v=4.0.0" rel="stylesheet">
</head>
<style>
ul{margin: 0;padding: 0;}
ul li{list-style: none;}

a,a:hover,a:link{color: #676a6c}

.clear{clear: both;}

.address-box{
	display:-webkit-box;
	display:-webkit-flex;
	display:flex;
	padding:10px 0;
	align-items: center;
	padding: 15px 15px 7px;
	background: #fff;
	margin-bottom: 8px;
	cursor: pointer;
}
.address-info{
	-webkit-box-flex:1;
	-webkit-flex:1;
	flex:1;
}

.goods-box,.price-box{
	padding: 10px 15px 15px;
	background: #fff;
	margin-bottom: 8px;
	align-items: center;
}
.goods-box .msg{border-bottom: 1px solid #eee; padding: 0px 0px 8px; font-size: 12px;}
.goods-item,.price-item{
	display:-webkit-box;
	display:-webkit-flex;
	display:flex;
	padding:10px 0;
	align-items: center;
}
.goods-item .item{
	-webkit-box-flex:1;
	-webkit-flex:1;
	flex:1;
}
.img-box{
	-webkit-box-flex:1;
	-webkit-flex:1;
	flex:1;
	overflow: hidden;
}
.item-box{table;  width: 95%; }
.img-box { width: 25%; float: left;}
.img-box img{width: 100%;}
.op-box{}
.op-box i{font-size: 24px;}
.op-box span{line-height: 16px;}

.price-item{
	border-bottom: 1px solid #eee;
}
.price-item:last-child {border: none;}
.price-item-title{
	-webkit-box-flex:1;
	-webkit-flex:1;
	flex:1;
}
.mbody{margin-bottom: 60px;}
.addAddress{position: fixed; left: 0; bottom: 0; width: 100%; height: 50px; background: #0dbe08; line-height: 50px; text-align: center;color: #fff; font-size: 16px; cursor: pointer;}

.addressBox{background: #fff; padding: 40px 0; display: none;}
.input-group{    margin: 0 10px;
    display: block;
    overflow: hidden;
}
.m-b{margin: 0 10px;}
.input-group label{ width: 30%; float: left; line-height: 34px;}
.input-group input{width: 70% !important;}

.btn{margin-top: 20px;}
.saveaddress,.canceladdress{cursor: pointer;}
</style>
<body class="gray-bg">
	<div class="mbody">
		{volist name="list" id="vo"}
		<div class="address-box" data-pcd="{$vo.pcd}" data-address="{$vo.address}" data-phone="{$vo.phone}" data-name="{$vo.name}" data-id="{$vo.address_id}">
			<div class="address-info">
				<p>{$vo.name}&nbsp;&nbsp;&nbsp;&nbsp;{$vo.phone}</p>
				<p>{$vo.pcd} {$vo.address}</p>
			</div>
			<div class="op-box">
			</div>
		</div>
		{/volist}
		<div class="addAddress">添加地址</div>
	</div>
	<div class="addressBox">
		<div class="input-group">
			<label class="control-label col-2 ">收货人</label>
			<input type="text" class="form-control" id="user">
		</div>
		<div class="input-group">
			<label class="control-label col-2 ">联系电话</label>
			<input type="text" class="form-control" id="phone">
		</div>
		<div class="input-group">
			<label class="control-label col-2 ">店铺地址</label>
			<input type="text" class="form-control" id="pcd">
		</div>
		<div class="input-group">
			<textarea class="form-control" placeholder="详细地址" id="address"></textarea>
		</div>
		<div class="m-b">
			<button class="btn btn-primary block full-width saveaddress">保存</button>
			<button class="btn block full-width canceladdress">取消</button>
		</div>
		
	</div>
    <script src="{$Think.config.site.resource_url}js/jquery.min.js?v=2.1.4"></script>
    <script src="{$Think.config.site.resource_url}js/bootstrap.min.js?v=3.3.5"></script>
    <script src="{$Think.config.site.resource_url}js/plugins/layer/layer.js"></script>
    <script src="{$Think.config.site.resource_url}js/plugins/iCheck/icheck.min.js"></script>
    <script src="{$Think.config.site.common_resource_url}js/majax.js"></script>
    <script src="{$Think.config.site.common_resource_url}js/jedit.js"></script>
</body>

</html>
<script type="text/javascript">
$('.address-box').click(function(){
	var id=$(this).data('id'), name=$(this).data('name'), phone=$(this).data('phone'), pcd=$(this).data('pcd'), address=$(this).data('address');
	parent.window.selectAddress({id:id,name:name,phone:phone,pcd:pcd,address:address});
})
$('.addAddress').click(function(){
	$('.mbody').hide();
	$('.addressBox').show();
	$('#user').val('');$('#phone').val('');$('#pcd').val('');$('#address').val('');
})
$('.canceladdress').click(function(){
	$('.mbody').show();
	$('.addressBox').hide();
})
$('.saveaddress').click(function(){
	var user = $('#user').val(),
		phone = $('#phone').val(),
		pcd = $('#pcd').val(),
		address = $('#address').val();
	var data = {pcd:pcd,address:address,name:user,phone:phone};
	majax("{:url('Cart/addAddress',["shop_id"=>$shop_id])}",data, function(d){
		if (d.code>0) {
			$('.canceladdress').click();
		}
	})
});
</script>